<template>
    <div class="chart" id="threechart">
    </div>
</template>

<script>
    import { inject, onMounted, reactive  } from "vue";
    import emitter from '../bus'

    export default {
        setup() {
      // 引入echarts
      let $echarts = inject("echarts");
      let $http = inject("axios");
      // 数据接收
      let threeData = reactive({});
      let xData = reactive([]);
      let yData = reactive([]);
      function setData() {
        xData = threeData.data.chartData.d1.map((v)=>v.name)
        yData = threeData.data.chartData.d1.map((v)=>v['pm2.5'])
        console.log(xData);
        console.log(yData);
      }
      async function getState() {
        threeData = await $http({ url: "/three/data" });
      }
      drawLine()
      function drawLine(){
        onMounted(() => {
        // 初始化echarts
        let myChart = $echarts.init(document.getElementById("threechart"));
        getState().then(() => {
          setData();
          myChart.setOption({
            title: {
      left: '1%'
    },
    tooltip: {
      trigger: 'axis'
    },
    grid: {
      left: '5%',
      right: '15%',
      bottom: '10%'
    },
    xAxis: {
      data: xData
    },
    yAxis: {},
    toolbox: {
      right: 10,
      feature: {
        dataZoom: {
          yAxisIndex: 'none'
        },
        restore: {},
        saveAsImage: {}
      }
    },
    dataZoom: [
      {
        startValue: '2014-06-01'
      },
      {
        type: 'inside'
      }
    ],
    visualMap: {
      top: 50,
      right: 10,
      pieces: [
        {
          gt: 0,
          lte: 50,
          color: '#93CE07'
        },
        {
          gt: 50,
          lte: 100,
          color: '#FBDB0F'
        },
        {
          gt: 100,
          lte: 150,
          color: '#FC7D02'
        },
        {
          gt: 150,
          lte: 200,
          color: '#FD0100'
        },
        {
          gt: 200,
          lte: 300,
          color: '#AA069F'
        },
        {
          gt: 300,
          color: '#AC3B2A'
        }
      ],
      outOfRange: {
        color: '#999'
      }
    },
    series: {
      name: 'Beijing AQI',
      type: 'line',
      data: yData,
      markLine: {
        silent: true,
        lineStyle: {
          color: '#333'
        },
        data: [
          {
            yAxis: 50
          },
          {
            yAxis: 100
          },
          {
            yAxis: 150
          },
          {
            yAxis: 200
          },
          {
            yAxis: 300
          }
        ]
      }
    }

          });
          window.onresize = myChart.resize;
          myChart.on("click", params => {
            console.log(params.name)
            // 前面是事件，后面是要传入的参数
            emitter.emit("response", params.name)

            })
        });
      });
      }


      
      return {
        getState,
        threeData,
        xData,
        yData,
        setData,
      };
    },
    }
</script>

<style lang="css" scoped>
  .chart {
    height: 400px;
  }
</style>